<template>
  <div class="container-out">
    <div class="top" ref="body" :style="{ perspectiveOrigin: `${581 + xPos}px ${476 + yPos}px` }">
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(-20px,350px,0px)' }">
          <h2>不是钱买不来快乐,而是你兜里的钱只够买烦恼！！！(T_T)</h2>
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(230px,350px,0px)' }">
          <h2>感觉自己被你发现了(●'◡'●)</h2>
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(-20px,100px,-100px)', zIndex: -1 }">
          <h2>我的微信是PlayGround916</h2>
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(335px, 67px, 85px)', zIndex: 10 }">
          <h2>你好~~~ 被你找到啦o(*￣▽￣*)ブ</h2>
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(738px, 381px, -812px)', zIndex: -1 }">
          <h2>可以给我留个言吗~</h2>
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(628px, 114px, -339px)', zIndex: -10 }">
          <h2>彩妆的尽头是裸妆,彩礼的尽头是饥荒吗</h2>
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(1000px, 0px, -698px)', zIndex: -10 }">
          <h2>可以留下你的小心心吗\^o^/</h2>
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(142px, 628px, -252px)', zIndex: -1 }">
          <h3>爱是一种满足精神饥渴的产物,不是本能反应</h3>
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(443px, 746px, -111px)', zIndex: -1 }">
          <h3>不上班只是没钱的问题,上了班身体和精神都会出现问题</h3>
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(487px, 602px, 500px)', zIndex: 1 }">
          <div class="mian1"></div>
          <div class="mian2"></div>
          <div class="mian3"></div>
          <div class="mian4"></div>
          <div class="mian5"></div>
          <div class="mian6"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(287px, 497px, 786px)', zIndex: 10 }">
          <h2>关注抖音甜瓜大王XinForever_0916</h2>
          <div class="mian1" style="filter: brightness(0.9); blur: 2px"></div>
          <div class="mian2" style="filter: brightness(0.9); blur: 2px"></div>
          <div class="mian3" style="filter: brightness(0.9); blur: 2px"></div>
          <div class="mian4" style="filter: brightness(0.9); blur: 2px"></div>
          <div class="mian5" style="filter: brightness(0.9); blur: 2px"></div>
          <div class="mian6" style="filter: brightness(0.9); blur: 2px"></div>
        </div>
      </div>
      <div class="container">
        <div class="box" :style="{ transform: 'translate3d(560px, 540px, 796px)', zIndex: 1 }">
          <div class="mian1" style="filter: brightness(0.9)"></div>
          <div class="mian2" style="filter: brightness(0.9)"></div>
          <div class="mian3" style="filter: brightness(0.9)"></div>
          <div class="mian4" style="filter: brightness(0.9)"></div>
          <div class="mian5" style="filter: brightness(0.9)"></div>
          <div class="mian6" style="filter: brightness(0.9)"></div>
        </div>
      </div>
      <div class="logo">
        <img src="@/assets/img/new-logo.png" alt="logo" />
        <p style="font-size: 20px; margin-bottom: 10px">基于Vite和Vue3的个人博客</p>
        <AdkButton
          :spacing="0.6"
          type="success"
          :main-textsize="1.2"
          @click="$router.push('/index')"
        >
          進入博客
          <template #endesc> enter blog </template>
        </AdkButton>
      </div>
      <ul class="icon-group">
        <li>
          <a href="https://github.com/goudoubutan" target="_blank"
            ><i class="iconfont icon-github"></i
          ></a>
        </li>
        <li>
          <a href="https://space.bilibili.com/1980926147" target="_blank"
            ><i class="iconfont icon-bilibili-line"></i
          ></a>
        </li>
        <li>
          <a href="https://twitter.com/ADKinsoMaD" target="_blank"
            ><i class="iconfont icon-tuite"></i
          ></a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useMousePointer } from '@/hooks/useMouseAdk'
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
const body = ref<HTMLElement | null>(null)
const { xPos, yPos } = useMousePointer(x, y, 5)
</script>
<style lang="less" scoped>
@import url(./styles/NewIndex.less);
</style>
